document.addEventListener('DOMContentLoaded', () => {
    const claimBtn = document.getElementById('claim-btn');
    const loginModal = document.getElementById('login-modal');
    const successModal = document.getElementById('success-modal');
    const closeBtn = document.querySelector('.close-btn');
    const closeSuccessBtn = document.querySelector('.close-success-btn');
    const loginBtn = document.getElementById('login-btn');
    const okBtn = document.getElementById('ok-btn');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');

    // Show login modal
    claimBtn.addEventListener('click', () => {
        loginModal.style.display = 'flex';
    });

    // Close login modal
    closeBtn.addEventListener('click', () => {
        loginModal.style.display = 'none';
    });

    // "Login" action
    loginBtn.addEventListener('click', () => {
        // IMPORTANT: No data is sent. This is a fake login.
        loginModal.style.display = 'none';
        successModal.style.display = 'flex';

        // Clear the input fields for privacy, even though we don't send data.
        usernameInput.value = '';
        passwordInput.value = '';
    });
    
    // Close success modal with the 'x'
    closeSuccessBtn.addEventListener('click', () => {
        successModal.style.display = 'none';
    });
    
    // Close success modal with the 'OK' button
    okBtn.addEventListener('click', () => {
        successModal.style.display = 'none';
    });

    // Close modals if user clicks outside of the modal content
    window.addEventListener('click', (event) => {
        if (event.target == loginModal) {
            loginModal.style.display = 'none';
        }
        if (event.target == successModal) {
            successModal.style.display = 'none';
        }
    });
}); 